<template>
	<view class="container"  :style="{height: screenHeight+'px'}">
		<myNav :title="'个人主页'" :scrollTop="scrollTop"></myNav>
		<view   @click="logOut" 
				style="z-index: 999;color: white; display: flex;align-items: center;justify-content: center; position: absolute; left: 350px; top: 50px;width: 50px; height: 50px;  font-size: 1.3rem;">
				<u-icon name="share-square" :size="60" :color="black"></u-icon>
		</view>
		<image class="backImage" :src="backImage" mode="aspectFill" @click="seeBack"></image>
		<view class="mainCard" :style="{height: screenHeight+'px', top: mainCardToTop+'px'}" >
			<view class="interactWithUser" style="z-index: 999;">
				<view style="color: grey;" @click="changeMyInfo">
					编辑资料
				</view>
<!-- 			<view v-else class="concernHim" @click="concern"
					  :style="{
						  background:isConcern==true?'rgba(248, 248, 248, 0.8)':'white',
						  color: isConcern==true?'grey':'black'
						  }">
					{{isConcern==true?"已关注":"关注"}}
				</view> -->
			</view>
			<view class="userBaseCard">
				<view class="mainInfo">
					<view class="head">
						<view class="vipLogo" v-if="isVip"></view>
						<image class="avatar" :src="avatar" mode="aspectFill"></image>
					</view>
					
					<view class="ownInfo">
						<view class="nickName">
							{{nickname}}
						</view>
						<view class="firstTags">
							<uni-tag class="identifyTag" v-if="Boolean(school)"  
														 :text="school" :inverted="true" size="mini" type="primary"></uni-tag>
							<uni-tag class="identifyTag"  v-if="Boolean(major)"
														 :text="major" :inverted="true" size="mini" type="primary"></uni-tag>
							<view style="font-size: 0.8rem;" v-if="!$store.state.loginUser.userBaseInfo.ownInfo.school && !$store.state.loginUser.userBaseInfo.ownInfo.major"
								  >
								还没有标签哦
							</view>
							<!--
							<view class="identifyTag">{{this.$store.state.loginUser.userBaseInfo.ownInfo.school}}</view>
							<view class="identifyTag">{{this.$store.state.loginUser.userBaseInfo.ownInfo.major}}</view>
							-->
						</view>
						
						<view>
							<uni-tag class="secondTags" v-for="(item, index) in tags" :key="index" :text="item" :inverted="true" type="warning" size="mini"></uni-tag>
						</view>
					</view>
				</view>
				
				<view class="introduce">
					{{introduce}}
				</view>
				
				<view class="concernAndFans">
					<view class="concern" @click="seeConcern">
						<view class="data">
							{{concernList.length}}
						</view>
						<p>关注</p>
					</view>
					<view class="fans" @click="seeFans">
						<view class="data">
							{{fansList.length}}
						</view>
						<p>粉丝</p>
					</view>
				</view>
			</view>
			
			<!--经历、动态等区域-->
			
			<view class="mainFrame">
				<u-sticky :offset-top="110" bgColor="white" customNavHeight="0">
					<view class="stickyBar" style="background-image: linear-gradient(to bottom right, #fdfdfd , #fafafa);">
						<u-tabs class="tabs"
						:current="current"
						@change="changeFrame"
						:list="guideList"
						lineWidth="30"
						lineHeight="9"
						lineColor="#3c9cff"
						:activeStyle="{
							color: '#3c9cff',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
						>
						</u-tabs>
					</view>
				</u-sticky>
				<view class="frame" style="margin: 0 auto;">
					<view class="" v-if="current == 0">
						<userThoughts :thoughtsList="Thoughts" style="transition: all 0.5s ease-in-out;"></userThoughts>
					</view>
					<view class="" v-if="current == 1">
						<userArticles></userArticles>
					</view>
					<view class="" v-if="current == 2">
						<userPostList></userPostList>
					</view>
					<view class="" v-if="current == 3">
						<userExprience></userExprience>
					</view>
					<view class="" v-if="current == 4">
						<userCollections></userCollections>
					</view>
				</view>
			</view>
			</view>
			
		</view>
		<!--
		<navigator url="./loginAndRegister" hover-class="none">
			
		</navigator>
		-->
	</view>
</template>

<script>
import { TRUE } from 'sass'
import {mapState} from 'vuex'
	export default{
		props:{
			scrollTop:{
				type: Number,
				default:60
			}
		},
		data(){
			return{
				show:false,
				//info:{},
				screenHeight: undefined,
				mainCardToTop: undefined,
				current: 0,
				isConcern:true,
				newConcern:false,
				teamPage: 1,
				teamPageSize: 13,
				
				Thoughts:[
				],
				guideList:[
					{
						name: "动态",
					},
					{
						name: "文章",
					},
					{
						name: "帖子",
					},
					{
						name: "经历",
					},
					{
						name: "活动",
					},
					{
						name: "收藏",
					}
				]
			}
		},
		methods:{
			open(){
				this.show = true
			},
			close(){
				this.show = false
			},
			init(){
				uni.getSystemInfo({
					success: (res) => {
						this.screenHeight = res.screenHeight;
						this.mainCardToTop = 200;
					}
				})
			},
			async logOut(){
				uni.showModal({
					title:'提示',
					content:'确定要退出登录?',
					success: (res) => {
						if(res.confirm){
							uni.removeStorage({key:'passwords'})
							uni.removeStorage({key:'account'})
							uni.removeStorage({key:'xdzn_token'})
							this.$forceUpdate()
							uni.reLaunch({
								url:'/pages/components/loginAndRegister',
								success: () => {
									
								}
							})
						}
					}
				})
			},
			changeFrame(index){
				this.current = index.index;
			},
			seeConcern(){
				uni.request({
					method:'GET',
					url:'http://162.14.102.246:8090/user/front/follow/1/15/'+this.$store.state.loginUser.userBaseInfo.id,
					//url:'http://192.168.31.146:8090/user/front/follow/1/15/'+this.$store.state.loginUser.userBaseInfo.id,
					header:{
						xdzn_token:this.$store.state.loginUser.token
					}
				}).then(res => {
					console.log(res)
					//this.$store.getter.get
				}).then(() => {
					
					uni.navigateTo({
						url:"/pages/components/userHomeFrames/concernsAndFans?kind=1&info="+encodeURIComponent(JSON.stringify(this.concernList)),
					})
					
				})
				/*
				uni.request({
					method:'GET',
					url:"",
					header:this.$store.state.loginUser.token,
				}).then(res => {
					uni.navigateTo({
						url:"",
					})
				})*/
			},
			seeFans(){
				//console.log(this.fansList)
				uni.navigateTo({
					//页面传参传对象的方法
					
					url:"/pages/components/userHomeFrames/concernsAndFans?kind=2&info="+encodeURIComponent(JSON.stringify(this.fansList)),
				})
				
				/*
				uni.request({
					method:'GET',
					url:"",
					header:this.$store.state.loginUser.token,
				}).then(res => {
					uni.navigateTo({
						url:"",
					})
				})*/
			},
			/*
			getMyInfo(){
				console.log("个人信息数据")
				uni.request({
					method:'GET',
					url:'http://192.168.31.146:8090/user/front/info',
					header:{
						xdzn_token:this.$store.state.loginUser.token
					}
				}).then(res => {
					//console.log(res)
					
					this.userInfo.avatar = res.data.data.info.avatar
					this.$store.state.loginUser.userBaseInfo.id = res.data.data.info.id
					this.$store.state.loginUser.userBaseInfo.introduce = res.data.data.info.introduce
					this.$store.state.loginUser.userBaseInfo.nickName = res.data.data.info.userName
					this.$store.state.loginUser.userBaseInfo.ownInfo.school = res.data.data.info.school
				})
			},*/
			getConcernCount(){
				console.log("关注列表信息数据")
				uni.request({
					method:'GET',
					url:`http://162.14.102.246:8090/user/front/follow/1/13/`+this.$store.state.loginUser.userBaseInfo.id,
					//url:`http://192.168.31.146:8090/user/front/follow/1/13/`+this.$store.state.loginUser.userBaseInfo.id,
					header:{
						xdzn_token:this.$store.state.loginUser.token
					}
				}).then(res => {
					//console.log(res)
					res.data.data.followList.forEach((item) => {
						item['isConcern'] = true
						//console.log("遍历数据",item)
						this.$store.state.loginUser.userBaseInfo.concernList.push(item)
					})
				})
			},
			getFansCount(){
				uni.request({
					method:'GET',
					url:`http://162.14.102.246:8090/user/front/fans/1/13/${this.$store.state.loginUser.userBaseInfo.id}`,
					//url:`http://192.168.31.146:8090/user/front/fans/1/13/${this.$store.state.loginUser.userBaseInfo.id}`,
					header:{
						xdzn_token: this.$store.state.loginUser.token
					}
				})
				.then(res => {
					if(res.data.code == 200){
						res.data.data.fansList.forEach((item) => {
							item['isConcern'] = true
							this.$store.state.loginUser.userBaseInfo.fansList.push(item)
						})
						
						//console.log('第一次获取后的粉丝数据', this.$store.state.loginUser.userBaseInfo.fansList)
					}
				})
			},
			seeBack(){
				//console.log(this.userInfo.tags)
				uni.previewImage({
					urls:[this.userInfo.backImage]
				}) 
			},
			concern(){
				if(this.isConcern == false){
					this.isConcern = true
					this.newConcern = true
				}else{
					this.isConcern = false
					this.newConcern = false
				}
			},
			changeMyInfo(){
				let obj = {
					id: this.$store.state.loginUser.userBaseInfo.id,
					userName: this.$store.state.loginUser.userBaseInfo.userName,
					nickname: this.$store.state.loginUser.userBaseInfo.nickname,
					avatar: this.$store.state.loginUser.userBaseInfo.avatar,
					fansCount: this.$store.state.loginUser.userBaseInfo.fansCount,
					//viewCount: this.$store.state.loginUser.userBaseInfo.concernCount,
					articleTotal: this.$store.state.loginUser.articles.length,
					state: this.$store.state.loginUser.loginStatus,
					introduce: this.$store.state.loginUser.userBaseInfo.introduce,
					blogUrl:this.$store.state.loginUser.userBaseInfo.blogUrl,
					geo: this.$store.state.loginUser.userBaseInfo.geo,
					background:this.$store.state.loginUser.userBaseInfo.background,
					age: this.$store.state.loginUser.userBaseInfo.ownInfo.age,
					sex:this.$store.state.loginUser.userBaseInfo.ownInfo.sex,
					school: this.$store.state.loginUser.userBaseInfo.ownInfo.school,
					major: this.$store.state.loginUser.userBaseInfo.ownInfo.major,
					concernCount: this.$store.state.loginUser.userBaseInfo.concernCount,
					tagUpdateList: this.$store.state.loginUser.userBaseInfo.tagList,
				}
				uni.navigateTo({
					url:'/pages/components/userHomeFrames/changeOwnInfo?info='+encodeURIComponent(JSON.stringify(obj))
				})
			},
			getTeams(){
				uni.request({
					url:`http://162.14.102.246:8090/team/front/recruitment/join/${this.teamPage++}/${this.teamPageSize}/${this.$$store.state.loginUser.userBaseInfo.id}`,
					methods: 'GET',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					}
				}).then(res => {
					if(res.data.code == 200){
						this.$store.loginUser.team = res.data.data.list
					}
				})
			},
			getMyActivities(){
				uni.request({
					url:`http://162.14.102.246:8090/activity/front/created/1/12/${this.$store.state.loginUser.userBaseInfo.id}`,
					method:'GET',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					}
				}).then(res => {
					//console.log(res)
					if(res.data.code == 200){
						res.data.data.list.forEach(item => {
							let flag = this.$store.state.allActivities.find(obj => obj.id = item.id)
							if(flag === undefined){
								this.$store.state.loginUser.userOtherInfo.activities.push(item)
							}
						})
					}
					//console.log(this.$store.state.loginUser.userOtherInfo.activities)
				})
			}
		},
		mounted() {
			this.getMyActivities();
		},
		computed:{
			...mapState({
				nickname: state => state.loginUser.userBaseInfo.nickname ,//'loginUser.userBaseInfo.nickname',
				isVip: state => state.loginUser.userBaseInfo.isVip,
				concernCount: state => state.loginUser.userBaseInfo.concernCount,
				backImage: state => state.loginUser.userBaseInfo.background,
				concernList: state => state.loginUser.userBaseInfo.concernList,
				fansList: state => state.loginUser.userBaseInfo.fansList,
				tags: state => state.loginUser.userBaseInfo.tagList,
				avatar: state => state.loginUser.userBaseInfo.avatar,
				school: state => state.loginUser.userBaseInfo.ownInfo.school,
				major: state => state.loginUser.userBaseInfo.ownInfo.major,
				introduce: state => state.loginUser.userBaseInfo.introduce
			})
		},
		onShow() {
			//this.userInfo.tags = this.$store.state.loginUser.userBaseInfo.tagList
			//console.log('onLoad',this.userInfo.tags)
		},
		onLoad() {
			this.init();
			//this.getMyInfo();
			// this.userInfo.tags = this.$store.state.loginUser.userBaseInfo.tagList
			
			// if(options.id == this.$store.state.loginUser.userBaseInfo.id){
			// 	this.isMe = true
			// }else{
			// 	this.isMe = false
			// }
			
			// if(!this.isMe){
				
			// }
			
			this.getConcernCount();
			this.getFansCount();
		}
	}
</script>
	
<style scoped>
	.container{
		width: 100%;
	}
	.backImage{
		position: absolute;
		width: 100%;
		height: 400upx;
		background: linear-gradient(to right, #e55d87, #5fc3e4);
	}
	.userBaseCard{
		display: flex;
		flex-direction: column;
		min-height: 560upx;
		width: 100%;
		padding-left: 60rpx;
		padding-right: 60rpx;
		position: relative;
		top: -90rpx;
		border-bottom: 12rpx solid rgba(211, 211, 211, 0.3);
	}	
	.mainCard{
		position: relative !important;
		top: 400upx;
		position: absolute;
		display: flex;
		flex-direction: column;
		background-color: white;
		position: relative;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
	}
	.mainInfo{
		position: relative;
		padding: 10rpx;
		display: flex;
		align-items: center;
	}
	.ownInfo{
		margin-left: 20rpx;
		margin-top: 80rpx;
	}
	::v-deep .secondTags{
		display: inline-block;
		border-radius: 2rpx;
		margin-right: 4rpx;
	}
	.interactWithUser{
		position: absolute;
		height: 60upx;
		width: 140upx;
		top: 30upx;
		left: 75%;
		border-radius: 30upx;
		border: 4upx solid rgba(211, 211, 211, 0.2);
		font-size: 0.7rem;
	}
	.interactWithUser>view{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 30upx;
		letter-spacing: 0.1rem;
		font-weight: bold;
	}
	.firstTags{
		display: flex;
		flex-direction: row;
		margin-bottom: 4rpx;
	}
	.nickName{
		margin-bottom: 11rpx;
	}
	::v-deep .identifyTag{
		margin-right: 6rpx;
	}
	.head{
		width: 150rpx;
		height: 150rpx;
		background-color: #d5e8ff;
		border-radius: 50%;
		display: flex;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		border: 4rpx solid whitesmoke;
		box-shadow: 2rpx 4rpx 10rpx rgba(211, 211, 211, 0.6);
	}
	::v-deep .avatar{
		width: 100%;
		height: 100%;
	}
	.introduce{
		display: -webkit-box;
		height: 110rpx;
		width: 660rpx; 
		position: relative;
		top: 60rpx;
		word-wrap: break-all;
		word-break: normal;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		font-size: 0.85rem;
		overflow: hidden;
		color: rgba(122, 122, 122, 1.0);
	}
	.concernAndFans{
		display: flex;
		height: 100px;
		position: relative;
		top: 140upx;
		left: 70%;
	}
	.concernAndFans>view{
		position: relative;
	}
	.concern{
		right: 60rpx;
	}
	.data{
		color: rgba(107, 107, 107, 1.0);
		font-size: 1rem;
		font-weight: bolder;
	}
	.concern>p, .fans>p{
		font-size: 0.8rem !important;
		font-weight: 400 !important;
		color: darkgray !important;
	}
	.mainFrame{
		position: relative;
		top: -78upx;
	}
	::v-deep .tabs{
		margin: 0 auto;
		border-bottom: 1rpx solid rgba(234, 234, 234, 1.0);
		letter-spacing: 8rpx;
	}
	::v-deep .u-tabs__wrapper__nav__line{
		text-align: center;
	}
	.frame{
		position: relative;
		top: 20rpx;
		height: 1500rpx;
	}
</style>